require('../css/commCss/normalize.css')
require('../css/commCss/reset.css')
require('../css/commCss/property.css')
require('../css/commCss/basic.css')

// 字体
require('../libs/fonts/iconfont.css')

require('../css/myRevise.less')

//axios请求
const axios = require('axios')

// weui-插件库
require('weui')
const weui = require('weui.js')


// 文档加载事件
document.addEventListener('DOMContentLoaded',function(){

    /**
     * 0.内容回填
     * 
     */
    axios.get('http://139.9.177.51:8099/users/accountinfo',{
        params:{
            userId:localStorage.userId
        }
    }).then(function(res){

        let data = res.data.data
        // console.log(data);

        //昵称
        document.querySelector('#nick').value = data.nickname

        //头像
        if(data.imgurl){
            document.querySelector('#imgCg').src = data.imgurl
        }

        //性别
        if(data.gender){
            document.querySelector('#sex').textContent = data.gender
        }

        //生日
        if(data.birthday){
            document.querySelector('#birthday').textContent = data.birthday.substr(0,10)
        }

        ////省份城市
        if(data.address){
            let add = data.address.split(",")
            // console.log(add);
            document.querySelector('#province').textContent = add[0]
            document.querySelector('#city').textContent = add[1]
        }

        //个人简介
        if(data.sign){
            document.querySelector('#sign').value = data.sign

            //个人介绍字数
            document.querySelector('#textNum').textContent = document.querySelector('#sign').value.length
        }

    })

    /**
     * 0.1个人介绍字数
     */
    // console.log();
    document.querySelector('#sign').addEventListener('input',function(){
        // console.log(this.value.length);
        document.querySelector('#textNum').textContent = this.value.length
    })
    


    /**
     * 1.返回
     */
    document.querySelector('#return').addEventListener('click',function(){
        history.go(-1)
    })   
    
    
    /**
     * 2.头像
     */
    // change改变事件
    document.querySelector('#imgChange').addEventListener('change',function(){
    
    console.log(file);
    let file = this.files[0]
    console.log(file);

    // 实例化一个formData对象
    let fd = new FormData()
    // 追加
    fd.append("imgurl",file)

    // 
    axios.post('http://139.9.177.51:8099/users/upload',fd)
        .then(function(res){
            // console.log(res.data);
            // 判断
            if(res.data.status === 0){
                document.querySelector('#imgCg').src = "http://139.9.177.51:8099" + res.data.data        
            }else{
                weui.toast(res.data.msg)
            }

        })
    })

    // 点击跟换头像 imgHead 触发imgChange
    document.querySelector('#imgHead').addEventListener('click',function(){
        // JS点击input框
        document.querySelector('#imgChange').click()
    })



    /**
     * 3.昵称
     */


    /**
     * 4.性别
     */
    document.querySelector('#sexPicker').addEventListener('click', function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        }], {
            
            onConfirm: function (result) {
                // console.log(result[0].label);
                document.querySelector('#sex').textContent = result[0].label;
            },
            title: '性别选择'
        });
    });
    
    /**
     * 5.生日
     */
    // 补零函数
    function fillzero(n){
        return n<10 ? '0'+n :n;
    }

    document.querySelector('#birthdayPicker').addEventListener('click', function () {
        weui.datePicker({
            start: new Date().getFullYear()-60,
            end: new Date().getFullYear(),
            
            onConfirm: function (result) {
                
                // console.log(result[0].value,result[1].value,result[2].value);
                let str = [result[0].value,fillzero(result[1].value),fillzero(result[2].value)].join('-')
                // console.log(str);
                document.querySelector('#birthday').textContent = str
            },
            title: '日期选择'
        });
    });


    /**
     * 6.所在省份
     */


    /**
     * 6.1 获取所有的省份和对应的城市
     */
     let provinceArr = []//省份（作用域）
     let  cityArr = []//城市（作用域）

     //省份请求
    axios.get('http://139.9.177.51:8099/address/province')
        .then(function(res){
            
            let data = res.data.data
            // console.log(data);

            //处理后端接口的数据
            provinceArr = data.map(function(items){
                return {label: items.name,value: items.addressId}
            })
            // console.log(provinceArr);
        })



     document.querySelector('#provincePicker').addEventListener('click', function () {
        weui.picker(provinceArr, {
            onConfirm: function (result) {
                // console.log(result[0].label);
                // console.log(result[0]);
                document.querySelector('#province').textContent = result[0].label;

                // 在选择省份时，请求城市的数据

                //获取省id
                let pid = result[0].value
                // console.log(pid);
                //发送请求
                axios.get('http://139.9.177.51:8099/address/city/' + pid)
                    .then(function(res){
                        // console.log(res.data);
                        let data = res.data.data
                        //处理城市接口数据
                        cityArr = data.map(function(items){
                            return {label: items.name,value: items.addressId}
                        })
                    })

                //重新选择省份，城市改变
                document.querySelector('#city').textContent = "请选择";
                
            },
            title: '省份选择'
        });
    });

    /**
     * 7.所在城市
     */
     document.querySelector('#cityPicker').addEventListener('click', function () {
        weui.picker(cityArr, {
            onConfirm: function (result) {
                // console.log(result[0].label);
                document.querySelector('#city').textContent = result[0].label;
            },
            title: '城市选择'
        });
    });
    

    /**
     * 8.点击保存信息，保存数据
     */
    document.querySelector('#saveBtn').addEventListener('click',function(){

        //创建对象判断参数是否正确
        //参数较多，先判断参数，在发送axios
        let save = {
            imgurl:document.querySelector('#imgCg').src,//头像
            nickname:document.querySelector('#nick').value,//昵称
            gender:document.querySelector('#sex').textContent,//性别
            birthday:document.querySelector('#birthday').textContent,//生日
            address:[document.querySelector('#province').textContent,document.querySelector('#city').textContent],//省份城市
            sign:document.querySelector('#sign').value,//个人简介
            userId:localStorage.userId,//id

        }
        // console.log(save);


        axios.post('http://139.9.177.51:8099/users/userEdit',save)
            .then(function(res){
                // console.log(res.data);
                // 判断
                if(res.data.status === 0){
                    weui.toast("保存成功",{
                        callback:function(){
                            location.href = "./myUser.html"
                        }
                    })
                }else{
                    weui.alert("修改失败")
                }
            })


    })
    












    
})
